<template>
  <div class="app">
    <div class="home_search">
      <van-search v-model="searchValue" shape="round" placeholder="搜索" />
    </div>
    <van-tree-select
      @click="change(active)"
      height="93vh
      "
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <div class="con" v-for="(item, index) in list" :key="item.id">
          <img :src="item.topUrl" alt="" v-if="active == index" />
        </div>
        <div class="jing">
          <h1>精选分类</h1>
          <div class="data">
            <van-grid :column-num="3" icon-size="60px">
              <van-grid-item
                v-for="value in topList"
                :key="value.id"
                :icon="value.url"
                :text="value.title"
              />
            </van-grid>
          </div>
        </div>
        <div class="jing">
          <h1>精选专区</h1>
          <div class="data">
            <van-grid :column-num="3" icon-size="60px">
              <van-grid-item
                v-for="value in bottomList"
                :key="value.id"
                :icon="value.url"
                :text="value.title"
              />
            </van-grid>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import { hpp2 } from "@/api/index.js";
import { classify } from "@/api";
export default {
  async created() {
    const data = await classify();
    console.log(data);
    console.log(11111111);
    this.list = data.data.sort_nav;
    console.log(this.list);
    this.list.map((item) => {
      return this.items.push({
        text: item.navtitle,
      });
    });
    this.topList = data.data.sort_top;
    console.log(this.topList);
    this.bottomList = data.data.sort_bottom;
  },
  methods: {
    async fn() {
      const http = await hpp2();
      console.log(http);
    },
    change(active) {
      console.log(active);
    },
  },
  data() {
    return {
      searchValue: "",
      activeKey: 0,
      list: [],
      active: 0,
      items: [],
      topList: [],
      bottomList: [],
    };
  },
  methods: {
    fn(value) {
      console.log(value);
    },
  },
};
</script>

<style lang="less" scoped>
html,
body {
  height: 100%;
  width: 100%;
}
.app {
  height: 100%;
  margin-bottom: 2.5rem;
  background-color: rgb(246, 246, 246);
  height: 100%;
  .van-sidebar-item--select::before {
    position: absolute;
    top: 50%;
    left: 1.2625rem;
    width: 5.75rem;
    height: 1.875rem;
    background-color: rgb(216, 150, 64);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    border-radius: 1.25rem;
    // margin-left: 
  }
  .van-tree-select__nav-item {
    padding: 1.3125rem .75rem;
  }
  .van-sidebar-item {
    width: 7.75rem;
    text-align: center;
    font-size: 1rem;
  }
  .con {
    img {
      width: 100%;
    }
  }
  .jing {
    height: 50vh;
    margin-top: 20px;
    h1 {
      font-size: 1.4875rem;
      font-weight: bold;
      color: rgb(51, 51, 51);
    }
    .data {
      .van-grid {
        height: 16.25rem;
        img {
          width: 3.125rem;
        }
      }
    }
  }
}

</style>



